<template>
  <q-page class="column q-pa-md">
    <q-item class="justify-between items-center">
      <div class="text-h5">
        {{ 'Управление врачами' }}
      </div>
      <q-btn color="primary"
             style="width: 300px; border-radius: 4px"
             @click="openCreateDoctorModal">
        {{ 'Создать' }}
      </q-btn>
    </q-item>
    <q-list class="q-pa-md">
      <q-item v-for="item in doctorsList"
              clickable
              :key="item.user.id"
              style="border: 1px solid grey"
              class="justify-between items-center wrap bg-blue-grey-3 rounded-borders q-mt-md"
              @click.self="openEditDoctorModal(item)">
        <div>
          <q-item-section class="text-bold">
            {{ item.user.full_name }}
          </q-item-section>
          <q-item-section style="margin-left: 0">
            {{ `Email: ${item.user.email}` }}
          </q-item-section>
          <q-item-section>
            {{ `Специализация: ${item.main_modality.name}` }}
          </q-item-section>
          <q-item-section>
            {{ `Предпочтительное расписание: ${item.preferred_schedule}` }}
          </q-item-section>
          <q-item-section>
            {{ `Предпочтительная смена: ${preferredShiftTranslationPathMap[item.preferred_shift]}` }}
          </q-item-section>
          <q-item-section>
            {{ `Процент: ${item.rate_percent}%` }}
          </q-item-section>
        </div>
        <q-btn style="border: 2px solid black; z-index: 20; max-height: 40px; max-width: 40px"
               icon="delete"
               flat round
               @click="deleteDoctor(item.user.id)"/>
      </q-item>
    </q-list>
    <create-doctor-modal />
    <edit-doctor-modal />
  </q-page>
</template>

<script setup>
import {computed, defineComponent, onMounted, reactive, ref, toRaw} from "vue";
import {doctorsStore} from "stores/doctors-store";
import CreateDoctorModal from "components/CreateDoctorModal.vue";
import EditDoctorModal from "components/EditDoctorModal.vue";
import Notifier from "src/helpers/Notifier";

defineComponent({
  name: 'ManageDoctorsPage'
});

const doctors = doctorsStore()

onMounted(async () => {
  await doctors.getDoctorsList()
  await doctors.getAdditionalModalities()
  await doctors.getShiftTypes()
  await doctors.getScheduleTypes()
})

const doctorsList = computed(() => doctors.doctorsList)

const preferredShiftTranslationPathMap = {
  night: 'ночь',
  day: 'день'
}

const openCreateDoctorModal = (doctor) => {
  doctors.creatableDoctor = doctor
  doctors.isCreating = true
}
const openEditDoctorModal = async (doctor) => {
  doctors.editableDoctor = await doctors.getOneDoctor(toRaw(doctor).user.id)

  doctors.isEditing = true
}

const deleteDoctor = async (code) => {
  try {
    Notifier.confirmAlert('Вы действительно хотите удалить профиль врача?', async () => {
      await doctors.deleteDoctor(code)
    })
  } catch (err) {
    console.error(err)
  }
}
</script>

<style lang="scss" scoped>

</style>
